<template>
    <div class="hamburger-wrap" @click="toggleClick">
        <span :class="{'is-active': isActive}" class="hamburger">
            <i class="el-icon-arrow-down"></i>
        </span>
    </div>
</template>

<script>
export default {
    name: 'Hamburger',
    props: {
        isActive: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        toggleClick() {
            this.$emit('toggleClick');
        }
    }
};
</script>

<style scoped lang="scss">
@import '@/styles/variables.scss';
.hamburger-wrap {
    display: flex;
    align-items: center;
    height: 28px;
    background-color: $--color-white;
    text-align: right;
    line-height: 28px;
    padding: 0 20px;
    box-sizing: border-box;
    /* box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.2); */
    border-top: 1px solid $--color-border-normal;
}
.hamburger {
    display: inline-block;
    margin-left: auto;
    font-size: $--font-size-12;
    transform: rotate(270deg);
}

.hamburger.is-active {
    transform: rotate(90deg);
}
</style>
